<template>
  <div class="login_box">
    <div class="login_contatiner">

      <div class="login_form">
        <el-form :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline">
          <el-form-item prop="storeUserPhone">
            <el-input v-model="formInline.storeUserPhone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="storeUserPwd">
            <el-input v-model="formInline.storeUserPwd" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="login('formInline')">登录</el-button>
          </el-form-item>
          <p class="login-tips" @click="goRegister">还没有帐号？立即注册</p>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin, getStoreUserToken } from '@/api/login'
export default {
  name: "index",
  data() {
    return {
      formInline: {
        storeUserPhone: '18809533837',
        storeUserPwd: 'st12346'
      },
      rules: {
        storeUserPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        storeUserPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    if (localStorage.getItem('token') !== '' && localStorage.getItem('token') != null && localStorage.getItem('token') !== undefined) {
      this.$router.push('/statistics')
    }
    this.getIPCity()
  },
  methods: {
    getIPCity() {
      let that = this
      let data = {
        key: 'KSPBZ-V5L33-5EM3D-35N5X-DIY66-CRF7J', //密钥
      }
      let url = 'https://apis.map.qq.com/ws/location/v1/ip' //腾讯地理位置信息接口
      data.output = 'jsonp' // 解决跨域问题
      this.$jsonp(url, data).then((res) => {
        this.formInline.ip = res.result.ip
        return res
      }).catch((error) => { })

    },
    goRegister() {
      this.$router.push('/register')
    },
    async getDetail() {
      let res = await getStoreUserToken()
      window.localStorage.storeCoding = res.body.storeCoding;
      // Vuex存储用户信息
      this.$store.commit('updateUserInfo', res.body);
      this.$message.success('登录成功')
      this.$router.push('/statistics')
    },
    login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let body = {
            ...this.formInline,
            logType: 1
          }
          let res = await userLogin({ body })
          if (res.code === '2000') {
            window.localStorage.token = res.body.token
            this.getDetail()
          } else {
            this.$message.error(res.msg)
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.login_box {
  width: 100%;
  height: 100%;
  background: url("../../assets/login_bg.jpg") 0 0 no-repeat;
  position: fixed;
}

.login_contatiner {
  position: absolute;
  width: 1000px;
  height: 500px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: url("../../assets/login_bg1.jpg") 0 0 no-repeat;
  background-size: 100%;
}

.login_form {
  position: absolute;
  width: 300px;
  right: 79px;
  top: 150px;
}

.copyright {
  position: fixed;
  bottom: 20px;
  text-align: center;
  width: 100%;
}

.login-tips {
  font-size: 14px;
  float: right;
  cursor: pointer;
}

.login-tips:hover {
  text-decoration: underline;
  color: #409EFF;
}</style>
